<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>管理收货地址</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">


		.address-list {
			background-color: #ffffff;
			padding: 0 0.75rem;
		}

		.address-list-item {
			/*display: flex;*/
			display: float;
			flex-direction: row;
			justify-content: space-between;
			height: 1.8rem;
			line-height: 1.8rem;
		}

		.address-details {
			display: inline-block;
			width: 100%;
			/*height: 2rem;*/
			line-height: 1rem;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			margin-top: .4rem;
			box-sizing: border-box;
		}

		.aui-info {
			padding: 0;
			height: 1.95rem;
		}

		.aui-btn-block {
			display: inline-block;
			width: 17.25rem;
			height: 1.95rem;
			line-height: 1.95rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1.55rem;
			font-size: .75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			margin: .25rem 0;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.btn {
			display: inline-block;
			height: 2.45rem;
			width: 100%;
			position: fixed;
			bottom: 0rem;
			background-color: #FFFFFF;
			transition: all 0.1s ease-out;
		}

		.address {
			display: inline-block;
			font-size: .75rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(34, 34, 34, 1);
			margin-top: .8rem;
		}

		.info-set {
			display: inline-block;
			width: 100%;
			display: flex;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
			;
		}

		.info-set>div:nth-child(1) {
			display: inline-block;
			flex: 3;
		}

		.info-set>div:nth-child(1)>span:nth-child(1) {
			margin-right: 1.05rem;
			font-weight: 600;
		}

		.info-set>div:nth-child(2)>div {
			display: flex;
			height: 2.6rem;
			width: 100%;
			border-left: 1px solid rgba(221, 221, 221, 0.5)!important;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.del-edit>span:nth-child(1) {
			flex: 1;
			display: inline-block;
			width: .9rem;
			height: .9rem;
			transform: translateY(-50%);
			margin-top: 30%;
			margin-left: .75rem;
			margin-right: 1.15rem;
		}

		.del-edit>span:nth-child(2) {
			flex: 1;
			display: inline-block;
			width: .9rem;
			height: .9rem;
			transform: translateY(-50%);
			margin-top: 30%;
		}

		.moren {
			display: inline-block;
			height: 1.9rem;
			line-height: 1.9rem;
			text-align: left;
			font-size: 15px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.moren img {
			/*width: 0.95rem;*/
			vertical-align: middle;
		}

		/*.aui-btn:active {
			color: #fff;
			background-color: rgba(0, 90, 147, 0.8);
		}*/

		.btn-frame {
			position: fixed;
			margin-top: 2rem;
			bottom: 1.5rem;
			text-align: center;
			width: 100%;
		}
		.aui-btn {
			display: inline-block;
			width: 17.25rem;
			height: 2.3rem;
			line-height: 2.3rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: #005A93;
			border-radius: 0.3rem;
			font-size: .8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			transition: all 0.1s ease-out;

		}

		.aui-btn:active {
			color: #fff;
			background-color: rgba(0, 90, 147, 0.8);
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="aui-content" style="padding-bottom: 3.5rem;">
			<div v-for="vo in info" class="address-list aui-margin-b-10">
				<!-- 设置手机号和地址 -->
				<div class="info-set" @click="setAddress(vo.id,vo.is_default,vo);next(vo)">
					<!-- 地址信息 -->
					<div style="">
						<span class="address">{{vo.username}}</span>
						<span class="address">{{vo.mobile}}</span>
						<span v-if="vo.is_default=='1'" style="display:inline-block;width:1.8rem;height:0.9rem;background:#005A93;border-radius: 0.1rem	;font-size:0.55rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);text-align:center;line-height:0.9rem;margin-left:0.4rem;margin-top:0.3rem">默认</span>
						<div class="address-details aui-ellipsis-2" style="line-height:1rem;padding-bottom:0.4rem;font-size:0.7rem;font-family:PingFangSC;font-weight:400;color:#333;">
							{{vo.province_name+vo.city_name+vo.area_name+vo.detailed_address}}
						</div>
					</div>

					<!-- icon 编辑/删除 -->

				</div>

				<!-- 设置默认地址 -->
				<div class="moren" tapmode @click="setAddress(vo.id,vo.is_default,vo)">
					<span style="display:inline-block;float:left;margin-top:.7rem;margin-right:.45rem;margin-top:0.58rem">
							<img v-if="vo.is_default=='1'" src="../../image/icon/select_new.png" style="width:0.95rem;height:0.95rem;">
							<img v-if="vo.is_default=='0'" src="../../image/icon/icon-noselect-red.png" style="width:0.9rem;height:0.9rem;">
						</span>
					<span class="" style="float:left;margin-top:0.2rem">默认地址</span>
				</div>
				<div style="display:inline-block;float:right;">
					<div class="del-edit">
						<span tapmode @click="editAddress(vo.id)">
										<img src="../../image/btn/edit.png " style="width:0.9rem;height:0.9rem"/>
								</span>
						<span tapmode @click="delAddress(vo.id)">
										<img src="../../image/btn/delete2.png "  style="width:0.9rem;height:0.9rem"/>
								</span>
					</div>
				</div>
			</div>

			<div class="btn-frame" tapmode tapmode onclick="open_win('address_new','../my/address_new.html',false)">
				<div class="aui-btn aui-btn-block">
					新增地址
				</div>
			</div>

		</div>

		<!-- <div id="aui-footer" class="btn" tapmode onclick="open_win('address_new','address_new.html',false)">
				<div class="aui-btn aui-btn-block ">
					新建地址
				</div>
			</div> -->

		<!-- 缺省页面 -->
		<div class="aui-text-center" v-if="info.length < 1" style="margin-top: 4rem;" tapmode>
			<img src="../../image/bg/bg-nonecar.png" style="width:7.55rem;margin-left:50%;transform:translateX(-50%);" />
			<div style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;width:100%; text-align: center;margin-top:1.35rem;">
				暂无数据
			</div>
		</div>






	</div>
</body>
<script type="text/javascript " src="../../script/api.js "></script>
<script type="text/javascript " src="../../script/vue.js "></script>
<script type="text/javascript " src="../../script/common.js "></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: []
		},
		methods: {
			get_list: function() {
				get_data('api/Address/addressList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
					}
				})
			},
			next: function (el) {
				send_event('address_choice', {
					address: el
				})
				delay_close()
			},
			setAddress: function(id, status,item) {
				// if (status == '1') {
				// 	return;
				// }
				get_data('api/Address/setAddress', {
					token: $api.getStorage('token'),
					id: id
				}, function(ret) {
					if (ret.status) {
						// toast(ret.msg)
						send_event('address_choice', {
							address: item
						})
						send_event('address_change')
					}
				})
			},
			delAddress: function(id) {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '确定要删除该地址吗？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确定'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 20,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function(ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {

						get_data('api/Address/delAddress', {
							token: $api.getStorage('token'),
							id: id
						}, function(ret) {
							if (ret.status) {
								toast(ret.msg)
								send_event('address_change')
							}
							var dialogBox = api.require('dialogBox');
							dialogBox.close({
								dialogName: 'alert'
							});
						})

					}
				});
				// dialog.alert({
				// 	title: "提示",
				// 	msg: '确定要删除该地址吗？',
				// 	buttons: ['取消', '确定']
				// }, function(ret) {
				// 	if(ret) {
				// 		if(ret.buttonIndex == '2') {
				// 			get_data('api/Address/delAddress', {
				// 				token: $api.getStorage('token'),
				// 				id: id
				// 			}, function(ret) {
				// 				if(ret.status) {
				// 					toast(ret.msg)
				// 					send_event('address_change')
				// 				}
				// 			})
				// 		}
				// 	}
				// })
			},
			editAddress: function(id) {
				$api.setStorage('addid', id)
				open_win('address_change', 'address_change.html', false)
			}
		}
	})
	var dialog = new auiDialog();
	apiready = function() {
		$api.fixTabBar($api.byId('aui-footer'))
		vm.get_list()
		add_event('address_change', function(ret) {
			vm.get_list()
		})
	}
</script>

</html>
